<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputStylesheet name="./css/animation.css"/>
        <h:outputStylesheet name="./css/print.css" media="print"/>
        <title>Facelets Template</title>
        <link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/unfiltered/images/psc.ico"/>
    </h:head>

    <h:body>
        <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel" >  
            <f:facet name="start">  
                <h:graphicImage value="./unfiltered/images/loading.gif" width="150" height="100" style="position: absolute;left: 40%;top: 40%;z-index: 1000000;"/>  
            </f:facet>  
            <f:facet name="complete">  
                <h:outputText value="" />  
            </f:facet>  
        </p:ajaxStatus>
        <h:form>
            <p:confirmDialog global="true" showEffect="fade" hideEffect="explode" message="Delete Everything. Are you sure?" widgetVar="confirmation">  
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
            </p:confirmDialog>  
        </h:form>
        <div id="top">

            <ui:insert name="top">

                <h:form>
                    <div id="logo" class="left">

                        <div class="container">

                            <div class="sp-container">
                                <div class="sp-content">

                                    <h2 class="frame-1">PSC</h2>

                                    <h2 class="frame-2">Protection</h2>

                                    <h2 class="frame-3">Web</h2>

                                    <h2 class="frame-4">Tool!</h2>

                                    <h2 class="frame-5"><span>PSC-Protection Web Tool.</span> </h2>
                                </div>
                            </div>
                        </div> </div>
                    <div class="userData">
                        Logged in as:#{login.current.name} | <h:commandLink action="#{projectsBean.openProject}" title="Project Home" style="text-decoration: underline">Project Home</h:commandLink> | <h:commandLink action="#{login.logout}" title="Logout" style="text-decoration: underline">Logout</h:commandLink>
                    </div>
                    <p:growl id="messages" sticky="true" showDetail="true"/>
                    <div>
                        <p:menubar autoDisplay="true" id="menu" widgetVar="menuVar" styleClass="mainMenu">
                            <p:submenu id="userMenu" label="User Tools" icon="ui-icon-contact">

                                <p:menuitem action="#{login.logout}" value="logout" id="logout" icon="ui-icon-arrowreturnthick-1-e"/>

                            </p:submenu>
                            <p:submenu id="projectMenu" label="Project Tools" icon="ui-icon-contact">
                                <p:menuitem  value="Create Project" id="crtProject" icon="ui-icon-arrowreturnthick-1-w" onclick="PF('projectDiag').show()" rendered="#{projectsBean.selectedProject==null and login.current.department.name eq 'Admin'}"/>
                                <p:menuitem  value="Open Project" id="openProject" icon="ui-icon-arrowreturnthick-1-w" action="#{projectsBean.openProject}"/>

                            </p:submenu>

                            <p:submenu id="reportsMenu" label="Reports" icon="ui-icon-contact" rendered="#{projectsBean.selectedReportProject!=null}">
                                <p:menuitem  value="Report Wizard" id="costReport" icon="ui-icon-arrowreturnthick-1-w"  update="messages" oncomplete="PF('comparetor').show();"/>
                            </p:submenu>
                            <p:submenu id="dbMenu" label="Backup Operations" icon="ui-icon-contact" rendered="#{login.current.department.name eq 'Admin'}">
                                <p:menuitem  value="Back Up" id="dbBack" icon="ui-icon-arrowreturnthick-1-w" action="#{backupController.backUp}"  update="messages"/>
                                
                            </p:submenu>
                            <p:submenu id="amdinMenu" label="Administer" icon="ui-icon-contact" rendered="#{login.current.department.name eq 'Admin'}">
                                <p:menuitem  value="Admin Page" id="openAdmin" icon="ui-icon-arrowreturnthick-1-w" action="admin?faces-redirect=true"  update="messages"/>

                            </p:submenu>
                        </p:menubar>
                    </div>
                </h:form>
            </ui:insert>
        </div>

        <div id="right" >
            <p:panel toggleable="true" header="Shout Box" toggleTitle="Toggled" styleClass="chatArea" id="pnl" >
            <div class="chatContainer">
                <div class="chatContent"></div>
                <div class="chatFooter">
                    <h:form>
                    
                        <p:inputTextarea rows="1" autoResize="true"  styleClass="shoutBox left" value="#{chatBean.shout}"></p:inputTextarea>
                        <p:commandButton icon="ui-icon-comment" oncomplete="$('.shoutBox').val('');" action="#{chatBean.send()}" styleClass="left" style="width: 20%;margin-left: 10px;margin-top: -1px;"/>
                    
                        </h:form>
                    
                </div>
            </div>
                </p:panel>
            <p:socket onMessage="handleMessage" channel="/notifications" />
            <p:draggable for="pnl"  dragOnly="true" opacity="0.5" />
        </div>
        <div id="content" class="left_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom">
                PSC WEB TOOL
                &reg;2014 . Build Date:#{releaseManager.formattedDate}
            </ui:insert>
        </div>
<script type="text/javascript">
function handleMessage(msg) { 
    $(".chatContent").append(msg);
}
function clear() { 
    alert("clearing")
    $('#shoutBox').text("aaa");
}
</script>
    </h:body>

</html>
